<template>
  <el-card style="max-width:1200px; margin:20px auto">
    <template #header>
      <h2>理论知识管理</h2>
      <div class="card-header">
        <div class="query">
          <el-input v-model="queryStr" placeholder="输入想要查询的理论知识" style="width: 300px;" />
          <el-button class="button" type="primary" @click="queryInfo">查询</el-button>
        </div>
        <div>
          <el-button class="button" type="warning" @click="openAddDialog">添加</el-button>
          <el-button class="button" type="danger" @click="multiDelete">多选删除</el-button>
        </div>
      </div>
    </template>

    <!-- 页面显示表格 -->
    <el-table :data="tableData" style="width: 100%" v-if="tableData.length > 0"
      @selection-change="handleSelectionChange" stripe highlight-current-row border>
      <el-table-column type="selection" width="75" />
      <el-table-column prop="name" label="理论知识名称" width="150" />

      <!--显示图片-->
      <el-table-column label="封面图片" width="230" prop="cover_image">
        <template #default="scope">
          <el-image style="width: 120px; height: 100px;" @load="handleLoad" @click.native="handleClick"
            :src="'http://localhost:8080/images/upload/'+scope.row.cover_image" class="avatar" />
        </template>
      </el-table-column>

      <el-table-column label="理论知识图片" width="230" prop="cover_image">
        <template #default="scope">
          <el-image style="width: 120px; height: 100px;" @load="handleLoad" @click.native="handleClick"
            :src="'http://localhost:8080/images/upload/'+scope.row.theory_knowledge_image" class="avatar" />
        </template>
      </el-table-column>


      <!--类型用下拉框！！-->
      <el-table-column prop="type" label="理论知识类型" width="150">
        <template #default="{ row }">
          {{ Array.isArray(row.type) ? row.type.join(', ') : row.type }}
        </template>
      </el-table-column>

      <el-table-column prop="view_count" label="浏览次数" width="120" />
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button class="button" type="success" size="small"
            @click="openDetailDialog(scope.row.theory_knowledge_id)">
            详情
          </el-button>
          <el-button class="button" type="warning" size="small" @click="openUpdateDialog(scope.row)">
            编辑
          </el-button>
          <el-button class="button" type="danger" size="small" @click="singleDelete(scope.row.theory_knowledge_id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-else style="text-align: center; padding: 20px; color: gray;">
      暂无数据
    </div>

    <!--分页！！！-->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
      :total="pageInfo.total" layout="total, prev, pager, next, jumper" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />

  </el-card>

  <!-- 对话框：添加、修改功能 -->
  <el-dialog v-model="dialogFormVisible" :title="title" width="1000px">
    <el-form :model="form">
      <el-form-item label="理论知识名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>

      <el-form-item label="理论知识类型" :label-width="formLabelWidth">
        <el-select v-model="form.type" placeholder="请选择理论知识类型">
          <el-option label="音阶与调式" value="音阶与调式" />
          <el-option label="节奏与韵律" value="节奏与韵律" />
          <el-option label="传统记谱法" value="传统记谱法" />
          <el-option label="曲式与结构" value="曲式与结构" />
          <el-option label="其他" value="其他" />

        </el-select>
      </el-form-item>

      <el-form-item label="理论知识介绍" :label-width="formLabelWidth" type="text">
        <el-input v-model="form.description" type="textarea" />
      </el-form-item>

      <el-form-item label="封面图片" :label-width="formLabelWidth">
        <el-upload class="avatar-uploader" action="http://localhost:8080/v1/tk/upload" :show-file-list="false"
          :on-success="handleSuccess_cover">
          <img v-if="form.cover_image" :src="'http://localhost:8080/images/upload/'+form.cover_image" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>

        </el-upload>
      </el-form-item>


      <!--图片列表-->
      <el-form-item label="理论知识图片" :label-width="formLabelWidth">
        <el-upload 
        v-model:file-list="fileList" 
        list-type="picture-card" 
         
        class="avatar-uploader" 
        action="http://localhost:8080/v1/tk/upload"
        :show-file-list="true" :on-success="handleSuccess_tk">
          <img v-if="form.theory_knowledge_image"
            :src="'http://localhost:8080/images/upload/'+form.theory_knowledge_image" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="btnAddUpdate">
          {{ btnName }}
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!-- 详情对话框-->
  <el-dialog v-model="dialogDetailVisible" title="理论知识详细信息显示">
    <el-form :model="form">
      <el-form-item label="理论知识名称" :label-width="formLabelWidth">
        <el-form-item :label="form.name"></el-form-item>
      </el-form-item>

      <el-form-item label="理论知识类型" :label-width="formLabelWidth">
        <el-form-item :label="form.type"></el-form-item>
      </el-form-item>
      
      <el-form-item label="封面图片" :label-width="formLabelWidth">
        <el-upload 
          v-model:file-list="fileList" 
          list-type="picture-card" 
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove" 
          class="avatar-uploader" 
          action="http://localhost:8080/v1/tk/upload"
         >
        <img v-if="form.cover_image"
          :src="'http://localhost:8080/images/upload/' + form.cover_image" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
      </el-form-item>
          
      <el-form-item label="理论知识图片" :label-width="formLabelWidth">
        <el-upload v-model:file-list="fileList" list-type="picture-card" 
           class="avatar-uploader" action="http://localhost:8080/v1/tk/upload"
          :show-file-list="true" :on-success="handleSuccess_tk">
          <img v-if="form.theory_knowledge_image"
            :src="'http://localhost:8080/images/upload/'+form.theory_knowledge_image" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="理论知识介绍" :label-width="formLabelWidth" type="text">
        <el-input v-model="form.description" type="textarea" />
      </el-form-item>

      <el-form-item label="上传日期" :label-width="formLabelWidth">
        <el-form-item :label="form.create_time"></el-form-item>
      </el-form-item>

    </el-form>
  </el-dialog>

</template>

<script>


import { ElImage, ElMessage,ElMessageBox } from 'element-plus';
import {Plus} from '@element-plus/icons-vue';

export default {
  data() {
    return {
      fileList:[],
      dialogDetailVisible:false,  //详情对话框是否显示
      dialogFormVisible: false,   //对话框是否显示
      form: {
      name: '',
      type: '',
      cover_image: '',
      theory_knowledge_image: '',
      description: '', // 用于绑定到文本框的值
      create_time: '',
    },
      formLabelWidth: '200px',//对话框宽度
      title: '添加理论知识', //对话框标题
      btnName:'',//对话框按钮名字


      queryStr: '',   //查询条件
      queryData:[],
      multipleSelection:'',//多选删除
      tableData: [
    {
        "theory_knowledge_id": 1,
        "name": "音阶",
        "type": "1",
        "cover_image": "\"C:\\Users\\sython\\Desktop\\头像1.png\"",
        "description": "很好弹",
        "theory_knowledge_image": null,
        "create_time": "2024-12-02T06:05:04.000+00:00",
        "view_count": 0
    },
    {
        "theory_knowledge_id": 2,
        "name": "曲风",
        "type": "1",
        "cover_image": "\"C:\\Users\\sython\\Desktop\\头像.png\"",
        "description": "无",
        "theory_knowledge_image": null,
        "create_time": "2024-12-02T06:05:04.000+00:00",
        "view_count": 0
    },
    {
        "theory_knowledge_id": 3,
        "name": "音阶",
        "type": "1",
        "cover_image": "\"C:\\Users\\sython\\Desktop\\头像.png\"",
        "description": "无",
        "theory_knowledge_image": null,
        "create_time": "2024-12-02T06:05:04.000+00:00",
        "view_count": 0
    },
    {
        "theory_knowledge_id": 4,
        "name": "符号",
        "type": "1",
        "cover_image": "\"C:\\Users\\sython\\Desktop\\头像.png\"",
        "description": "无",
        "theory_knowledge_image": null,
        "create_time": "2024-12-02T06:05:04.000+00:00",
        "view_count": 0
    },
    {
        "theory_knowledge_id": 5,
        "name": "识谱",
        "type": "1",
        "cover_image": "\"C:\\Users\\sython\\Desktop\\头像.png\"",
        "description": "无",
        "theory_knowledge_image": null,
        "create_time": "2024-12-02T06:05:04.000+00:00",
        "view_count": 0
    }
],//理论知识数据


      pageInfo:{},//分页信息对象
      pageSize:7,//当前页条数
      currentPage:1,//当前页号
      imageUrl:''//图片URL
    };
  },
  methods: {

   
handleClick(){

},

handleLoad(){

},
    
    closeDetailDialog(){         //详情对话框
      console.log("closeDetailDialog()...");
     },
   

    handleSuccess_cover(response){     //添加对话框图片回显
      this.form.cover_image=response
    },


    handleSuccess_tk(response){     //添加对话框图片回显，但是现在显示多张图片了，所以不需要回显了
      this.form.theory_knowledge_image=response
    },
    

    handleSizeChange(pageSize){    //选择每一页显示的记录数
      this.pageSize = pageSize;
      this.getPageData(this.currentPage,this.pageSize)
      console.log("size:",pageSize);
    },

    handleCurrentChange(pageNum){   //切换页号时得到当时页号
      this.currentPage = pageNum;
      this.getPageData(this.currentPage,this.pageSize)
      console.log("num:",pageNum);
    },



    getPageData(num,size){    //得到分页数据
      this.$http.get("/v1/tkpage",{params:{pageNum:num,pageSize:size}}).then((response)=>{
        this.pageInfo = response.data
        this.tableData = this.pageInfo.list  
        console.log("分页参数:", { pageNum: num, pageSize: size });
      })
    },

    closeDialog() {
      this.form = []
      console.log("closeDialog()......");
    },

    //打开详情对话框
    openDetailDialog(theory_knowledge_id){
      var _this = this;
      this.$http.get("/v1/tk2/"+theory_knowledge_id).then(function(response){
          console.log(response.date);
          _this.form = response.data;
         
      })
      this.dialogDetailVisible = true
    },


    // 打开添加理论知识信息对话框
    openAddDialog() {
      this.btnName = '添加';
      this.title = '添加理论知识';
      this.dialogFormVisible = true;
      console.log("openAddDialog()......");
    },

    openUpdateDialog(row){     //打开修改对话框，修改数据回显
      this.btnName = "修改"
      this.title = "修改理论知识信息"
      this.dialogFormVisible = true
      this.form = row
      
      //可能存在要数据回显的问题，待完善！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

      console.log("openUpdataDialog()......");
    },

   

    updateNotation(){    //修改功能
      console.log(this.form);
      var _this = this;
      this.$http.put("/v1/tk4",this.form).then(function(response){
        console.log(response.data);
        if(response.data == 1){
          ElMessage({
            message:'理论知识信息修改成功！',
            type:'success',
          })
        }else{
          ElMessage({
            message:'理论知识信息修改失败.',
            type:'warning'
          })
        }
      })
      this.form = []
    },

    addNotation(){    //添加功能
      var _this = this;
      this.$http.post("/v1/tk3",this.form).then(function(response){
        console.log(response.data);
        if(response.data == 1){
          ElMessage({
            message:'理论知识信息添加成功！',
            type:'success',
          })
        }else{
          ElMessage({
            message:'理论知识信息添加失败.',
            type:'warning'
          })
        }
        
      })
      this.form = []
    },




    //---------------------------------------------------------------------------------------------------
    btnAddUpdate(){      //添加、修改功能
      if (this.btnName == "添加") {
        this.addNotation()
        console.log("添加操作......");
        console.log(this.form);
      }
      if (this.btnName == "修改") {
        this.updateNotation()
        console.log(this.form);
        console.log("修改操作......");
      }
      this.dialogFormVisible = false
    },

    singleDelete(theory_knowledge_id){     //删除单条数据功能
      // var _this = this;
      // this.$http.delete("/v1/notation5/" + notation_id).then(function (response){
      //   console.log(response.data);
      // })
      ElMessageBox.confirm(     //弹出消息框进行删除确认
        '您确定要删除本条数据吗？',
        'Warning',
        {
          confirmButtonText:'OK',
          cancelButtonText:'取消',
          type:'warning',
        }
      )
      .then(() =>{
        var _this = this;
        this.$http.delete("/v1/tk5/" + theory_knowledge_id).then(function (response){
          console.log(response.data);
          if(response.data == 1){
          ElMessage({
            message:'删除成功！',
            type:'success',
          })
        }else{
          ElMessage({
            message:'删除失败.',
            type:'warning'
          })
        }
          
        })
      })
      .catch(() =>{
        ElMessage({
          type:'Info',
          message:'删除取消'
      })
      })
      console.log("singleDelete()........");
    },




    multiDelete(){    //删除多条数据功能
      console.log("multiDelete().......");
      ElMessageBox.confirm(     //弹出消息框进行删除确认
        '您确定要删除您所选中的这些数据吗？',
        'Warning',
        {
          confirmButtonText:'OK',
          cancelButtonText:'取消',
          type:'warning',
        }
      )
      .then(() =>{
        var _this = this;
        var num = 0;
        this.multipleSelection.forEach(item =>{
          var _this = this;
          var theory_knowledge_id = item.theory_knowledge_id
          this.$http.delete("/v1/tk5/" + theory_knowledge_id).then(function (response){
            if (response.data == 1) {
              num = num + 1;
              ElMessage({
                type: 'success',
                message: '你成功删除' + num + '条记录！',
              });
            }
          });
        });
        this.getPageData(this.currentPage, this.pageSize); // 重新加载数据
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled',
        });
      });
    },



    queryInfo(){      //查询功能
      if(this.queryStr.trim().length > 0){
        this.tableData = this.tableData.filter(item=>(item.name).match(this.queryStr.trim()))
      }else{
        this.tableData = this.queryData
      }
      console.log("queryInfo()......");
      
    },

    handleSelectionChange(val){     //多选
      this.multipleSelection = val;
      console.log(this.multiSeletion);
      
    }
  },
  components:{
    
    Plus
  },
  mounted() {
    this.getPageData(1,7)

  }
};
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
}

.query {
  display: flex;
  justify-content: space-between;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>